<template>
  <div class="subassembly">
    <div
      class="subassembly-list"
      v-for="item in componentType"
      :key="item.type"
      draggable="true"
      @dragstart="handleDragstart($event, item)"
    >
      <svg
        class="al-icon"
        :style="{ fontSize: item.style.fontSize, color: item.style?.color }"
      >
        <use :xlink:href="item.icon"></use>
      </svg>
      <el-text class="subassembly-list_title">
        {{ item.name }}
      </el-text>
    </div>
  </div>
</template>
<script setup>
import { componentType } from '../config/layoutType'
let handleDragstart = (event, res) => {
  event.dataTransfer.setData('subassemblyData', JSON.stringify(res))
}
</script>
<style scoped>
.subassembly {
  display: flex;
  flex-direction: column;
  padding: 6px;
  box-sizing: border-box;
  row-gap: 10px;
  width: 60px;
}
.subassembly-list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}
.subassembly-list:hover {
  background: #e7eaed;
}
.subassembly-list_title {
  margin-top: 6px;
}
</style>
